<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box"></div>
    <script>
        // 初始化拖放对象
        var box = document.getElementById("box");
        // 获取页面中被拖放元素的引用指针
        box.style.position = "absolute";  // 绝对定位
        box.style.width = "160px";  // 定义宽度
        box.style.height = "120px";  // 定义高度
        box.style.backgroundColor = "red";  // 定义背景色
        // 初始化变量，标准化事件对象
        var mx, my, ox, oy;  // 定义备用变量
        function e(event) {  // 定义事件对象标准化函数
            if (!event) {  // 兼容IE浏览器
                event = window.event;
                event.target = event.srcElement;
                event.layerX = event.offsetX;
                event.layerY = event.offsetY;
            }
            event.mx = event.pageX || event.clientX + document.body.scrollLeft;
            // 计算鼠标指针的x轴距离
            event.my = event.pageY || event.clientY + document.body.scrollTop;
            // 计算鼠标指针的y轴距离
            return event;  // 返回标准化的事件对象
        }
        // 定义鼠标事件处理函数
        document.onmousedown = function (event) {  // 按下鼠标时，初始化处理
            event = e(event);  // 获取标准事件对象
            o = event.target;  // 获取当前拖放的元素
            ox = parseInt(o.offsetLeft);  // 拖放元素的x轴坐标
            oy = parseInt(o.offsetTop);  // 拖放元素的y轴坐标
            mx = event.mx;  // 按下鼠标指针的x轴坐标
            my = event.my;  // 按下鼠标指针的y轴坐标
            document.onmousemove = move;  // 注册鼠标移动事件处理函数
            document.onmouseup = stop;  // 注册松开鼠标事件处理函数
        }
        function move(event) {  // 鼠标移动处理函数
            event = e(event);
            o.style.left = ox + event.mx - mx + "px";  // 定义拖动元素的x轴距离
            o.style.top = oy + event.my - my + "px";  // 定义拖动元素的y轴距离
        }
        function stop(event) {  // 松开鼠标处理函数
            event = e(event);
            ox = parseInt(o.offsetLeft);  // 记录拖放元素的x轴坐标
            oy = parseInt(o.offsetTop);  // 记录拖放元素的y轴坐标
            mx = event.mx;  // 记录鼠标指针的x轴坐标
            my = event.my;  // 记录鼠标指针的y轴坐标
            o = document.onmousemove = document.onmouseup = null;
            // 释放所有操作对象
        }
    </script>

</body>

</html>